<template>
    <div class="search-box">
        <div class="search-box-input">
            <input type="text" placeholder="请输入搜索内容" />


            <Cascader v-model="value" :options="data" :valueId="valueId" :placeholderSelect="'请选择项目'"
                :asyncCommit="true" :placeholder="'请选择'" :multiple="true" :label="label" :children="children">
            </Cascader>
        </div>
        <div class="search-box-button">
            <button>搜索</button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { Cascader } from 'gxrcw-ui'
import { ref, Ref } from 'vue'
import district from './district-tree.json';

const label = 'keywordName';
const children = 'children'
const valueId = 'keywordID'
interface propType {
    [label]: string,
    [children]: propType[],
    [valueId]: number,
}

const data: Ref<propType[]> = ref([]);
const value = ref([["1", "1"], ["1", "3", "84"], ["1", "10", "129"]]);


setTimeout(() => {
    //模拟异步请求
    data.value = district.data;
}, 1000);
</script>
<style scoped lang="scss">
.search-box {
    width: 100%;
    height: 80px;
    background-color: red;
    :deep(.gxrc-input__inner){
        white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
    }
}
</style>